{include file="public/head"/}
<div class="container-fluid" id="transfer">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div class="alert alert-dismissable alert-info" id="headeralert">
				<button type="button" class="close">×</button>
				<p></p>
			</div>
		</div>
	</div>
	<div class="ntDesktop">
		<div class="ntDesktop-head">调货指令列表</div>
		<div class="row">
			<div class="col-md-3 text-right">
				<ul class="nav nav-tabs">
					<li @click="changestatus(1)" class="active"><a href="#store_order_detail" data-toggle="tab">调货指令</a></li>
					<li @click="changestatus(2)"><a href="#store_order" data-toggle="tab">调货单</a></li>
				</ul>
			</div>
			<div class="col-md-6">
				<ul class="nav nav-tabs">
					<li :class="{'active':index==0}"  @click="btnwarehouse(item.id)" v-for="(item,index) in warehousedata">
						<a href="#" data-toggle="tab">{{item.name}}</a>
					</li>
				</ul>
			</div>
			<div class="col-md-3 text-right">
				{in name="384" value="$Think.session.admin.auth_ids"}
				<button v-if="status==1" class="btn btn-primary" style="padding-left:4rem;padding-right:4rem" @click="diaohuo">
					<span class="fa fa-file-code"></span> 生成调货单
				</button>
				{/in}
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="tab-content">
					<div class="tab-pane active" id="store_order_detail">
						<table class="table table-striped table-hover ntTable">
							<thead>
							<tr>
								<th><input type="checkbox"  @click="allsel"></th>
								<th class="sorting" width="30%"  @click="sortfun(1)" data-order="1"> 产品 </th>
								<th> 箱规 </th>
								<th class="sorting" @click="sortfun(2)" data-order="1"> 库存 </th>
								<th class="sorting" @click="sortfun(3)" data-order="1"> 调货数量 </th>
								<th class="sorting" @click="sortfun(4)" data-order="1"> 申请 </th>
								<th> 操作 </th>
							</tr>
							</thead>
							<tbody>
							<tr v-for="(item,index) in listone">
								<td>
									<input type="checkbox" @click="onesel(index)">
								</td>
								<td>
									<div class="pro">
										<div class="pro-icon"><img :src="item.prodata.img_url" border="0" width="48px" height="48px" alt=""></div>
										<div class="pro-name">
											<small> {{formatUnit(item.prodata.prochar_id,'ID') + (item.prodata.brand_name ? ' / '+item.prodata.brand_name :'')+ (item.prodata.model ? ' / '+item.prodata.model :'')}}
											</small>
											<br>
											{{item.prodata.pro_name}}
										</div>
									</div>
								</td>
								<td align="right">
									{{item.prodata.prochar_qty}}<small class="unit">PCS/CTN</small><br>
									{{item.prodata.ctn_size}}<small class="unit">CM</small>
								</td>
								<td align="right">
									{{formatUnit(item.storeqty,'PCS')}}<small class="unit">PCS</small><br>
									{{formatUnit(item.storeqty/item.prodata.prochar_qty,'CTN')}}<small class="unit">CTN</small>
								</td>
								<td align="right">
									{{formatUnit(item.qty?item.qty:'-','PCS')}}<small class="unit">PCS</small><br>
									{{formatUnit(item.qty/item.prodata.prochar_qty,'CTN')}}<small class="unit">CTN</small>
								</td>
								<td>
									{{item.create_name?item.create_name:'-'}}<br>
									<small>{{item.create_date?item.create_date:'-'}}</small>
								</td>
								<td align="right">
									{in name="385" value="$Think.session.admin.auth_ids"}
									<button class="btn btn-sm btn-default" @click.prevent="deltransfer(item.id,item.prodata.pro_name,1)">删除</button>
									{/in}
								</td>
							</tr>
							<tr style="text-align: center;" v-if="listone.length==0">
								<td colspan="7" class="no_date">{:lang('no_data')}</td>
							</tr>
							</tbody>
						</table>
						<ul class="pagination" id="paginationone" v-show="listone.length!=0">
						</ul>
					</div>
					<div class="tab-pane" id="store_order">
						<table class="table table-striped table-hover ntTable">
							<thead>
							<tr>
								<th>单号</th>
								<th>发货仓</th>
								<th>产品数量</th>
								<th>箱数</th>
								<th>体积</th>
								<th>重量</th>
								<th>打印</th>
								<th>已收货</th>
								<th>创建</th>
								<th>编辑</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody>
							<tr v-for="(item,index) in listtwo">
								<td>{{formatUnit(item.id,'ID')}}</td>
								<td>{{item.source_name}}</td>
								<td align="right">{{item.pronum}}<small class="unit">PRO</small></td>
								<td align="right">{{item.ctnnum}}<small class="unit">CTN</small></td>
								<td align="right">{{formatUnit(item.m3num,'CBM')}}<small class="unit">CBM</small></td>
								<td align="right">{{formatUnit(item.kgsnum,'KGS')}}<small class="unit">KGS</small></td>
								<td>{{item.print_name}}<br><small>{{item.print_date}}</small></td>
								<td>{{item.receive_name}}<br><small>{{item.receive_date}}</small></td>
								<td>{{item.create_name}}<br><small>{{item.create_date}}</small></td>
								<td>{{item.update_name}}<br><small>{{item.update_date}}</small></td>
								<td align="right">
									{in name="387" value="$Think.session.admin.auth_ids"}
									<a :href="'/admin/warehouses/transdetail?id='+item.id+'&warehouse_id='+warehouse_id" class='btn btn-sm btn-default'
									   data-toggle="modal" data-target="#order_viewModal">查看</a>
									{/in}
									<a class='btn btn-sm btn-primary'>打印</a>
									{in name="386" value="$Think.session.admin.auth_ids"}
									<button class="btn btn-sm btn-default" @click.prevent="deltransfer(item.id,item.source_name,2)">删除</button>
									{/in}
								</td>
							</tr>
							<tr style="text-align: center;" v-if="listtwo.length==0">
								<td colspan="10" class="no_date">{:lang('no_data')}</td>
							</tr>
							</tbody>
						</table>
						<ul class="pagination" id="paginationtwo" v-show="listtwo.length!=0">
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 调货单生成 详情页 -->
	<div class="modal fade" id="order_editModal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width:80vw">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" >调货单生成</h4>
				</div>
				<div class="modal-body">
					<div class="row clearfix">
						<div class="col-md-12 column">
							<div class="alert alert-dismissable alert-info">
								<button type="button" class="close">×</button>
								<p></p>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8">
							<div class="panel panel-default">
								<div class="panel-body">
									<div class="col-md-3 lh-3">发货仓<span class="required"></span></div>
									<div class="col-md-9">
										<select name="" class="form-control" v-model="source_id">
											<option value="">{:lang('please_select')}</option>
											<option :value="item.id" v-for="(item,index) in tiaowarsedata">
												{{item.name}}
											</option>
										</select>
									</div>
								</div>
								<table class="table table-striped ntTable">
									<thead>
									<tr>
										<th>#</th>
										<th width="50%">产品</th>
										<th>箱规</th>
										<th>数量</th>
										<th>库存</th>
									</tr>
									</thead>
									<tbody>
									<tr v-for="(item,index) in tiaolist">
										<td align="center">{{index+1}}</td>
										<td>
											<div class="pro">
												<div class="pro-icon"><img :src="item.prodata.img_url" border="0" width="48px" height="48px" alt=""></div>
												<div class="pro-name">
													<small> {{formatUnit(item.prodata.prochar_id,'ID') + (item.prodata.brand_name ? ' / '+item.prodata.brand_name :'')+ (item.prodata.model ? ' / '+item.prodata.model :'')}}
													</small>
													<br>
													{{item.prodata.pro_name}}
												</div>
											</div>
										</td>
										<td align="right">
											{{item.prodata.prochar_qty}}<small class="unit">PCS/CTN</small><br>
											{{item.prodata.ctn_size}}<small class="unit">CM</small>
										</td>
										<td align="right">
											{{formatUnit(item.qty?item.qty:'-','PCS')}}<small class="unit">PCS</small><br>
											{{formatUnit(item.qty/item.prodata.prochar_qty,'CTN')}}<small class="unit">CTN</small>
										</td>
										<td align="right">
											{{formatUnit(item.storeqty,'PCS')}}<small class="unit">PCS</small><br>
											{{formatUnit(item.storeqty/item.prodata.prochar_qty,'CTN')}}<small class="unit">CTN</small>
										</td>
									</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="col-md-4">
							<div class="panel panel-default">
								<div class="panel-heading">
									取货人<span class="required"></span>
								</div>
								<div class="div-scroll" style="max-height:50vh">
									<table class="table table-hover">
										<thead>
										<tr>
											<th width="15%">取货</th>
											<th width="15%">组员</th>
											<th>姓名</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="item in takename">
											<td><input type="radio" name="leader" v-model="leader" :value="item.admin_id"></td>
											<td><input type="checkbox" name="team" v-model="team" :value="item.admin_id"></td>
											<td>
												{{item.admin_name}}
												<span class="pull-right label label-info">{{item.postion}}</span>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">
						<span class="glyphicon glyphicon-remove"></span>取消
					</button>
					<button :disabled="isdisadble" @click="savebtn" type="button" class="btn btn-primary">
						<span class="fa fa-save"></span> 保存
					</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 调货单 详情页 -->
	<div class="modal fade" id="order_viewModal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width:80vw">
			<div class="modal-content">

			</div>
		</div>
	</div>

</div>
<!-- InstanceBeginEditable name="EditModal" -->
<!--弹窗部分 结束-->
{include file="public/foot"/}
<script>
    var table = new Vue({
        el: '#transfer',
        data: {
            warehousedata: [],//仓库
            takename:[],//取货人
            warehouse_id: '',//标签切换仓库id
            page: 1,
            pageSize: 30,
            listone: [],
            listtwo:[],
            tiaolist:[],//调货单产品
            tiaowarsedata:[],//调货单的仓库
            source_id:'',//源(发货)仓库ID
            batch:[],//勾选的索引
            allkeys:[],//当前页的索引
            pauname: '',
            order: 1,
            isdisadble:false,
            status:1,//切换的状态
            leader:'',//取货
            team:[]//组员
        },
        methods: {
            formatUnit: formatUnit,
            //分页
            setPage(pageCurrent, pageSum,pagination) {
                //数据总条数
                var myPageCount = pageSum;
                //一页显示多少条
                var myPageSize = this.pageSize;
                //总页数
                var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
                $.jqPaginator(pagination, {
                    totalPages: parseInt(countindex),
                    //最多显示多少页
                    visiblePages: 5,
                    //默认显示第几页
                    currentPage: pageCurrent,
                    first: '<li class="first"><a href="javascript:;">' + langcon.page_home + '</a></li>',
                    prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>' + langcon.previous_page + '</a></li>',
                    next: '<li class="next"><a href="javascript:;">' + langcon.next_page + '<i class="arrow arrow3"></i></a></li>',
                    last: '<li class="last"><a href="javascript:;">' + langcon.last_page + '</a></li>',
                    page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                    all: '<li class="page"><a href="javascript:;">' + myPageCount + ' / ' + this.page + 'PG , ' + this.pageSize + ' /PG</a></li>',
                    onPageChange: (num, type) => {
                        if (type == "change") {
                            this.page = num
                            this.getAllList()
                        }
                    }
                });
            },
            //数据所有获取
            getAllList(){
                $.ajax({
                    url: "/admin/warehouses/warehousetransfer",
                    type: 'post',
                    data: {
                        getdata: ''//获取的标志
                    },
                    dataType: "json",
                    success: (result) => {
                        this.warehousedata = result.warehousedata;//仓库名称
                        this.btnwarehouse(result.warehousedata[0].id);//默认第一个仓库的数据
                    }
                })
            },
            //点击每一个仓库的数据
            btnwarehouse(warehouse_id){
                $('table input').prop('checked', false)
                this.warehouse_id = warehouse_id;//收货仓id
                this.batch=[];//重新赋值
                $('.loding').show()
                $.ajax({
                    url: "/admin/warehouses/warehousetransfer",
                    type: 'post',
                    data: {
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                        getdata: '',//获取的标志
                        warehouseid: warehouse_id,//收获仓库id
                        status:this.status,//调货指令，调货单
                    },
                    dataType: "json",
                    success: (result) => {
                        let pagination = '';
                        if (this.status == 1) {
                            this.listone = result.data;
                            pagination = '#paginationone';
                            this.allkeys=result.keys;
                            this.takename=result.takename;//取货人
                        } else if (this.status == 2) {
                            this.listtwo = result.data;
                            pagination = '#paginationtwo';
                        }
                        if (result.count){
                            this.setPage(parseInt(this.page), result.count, pagination)
                        }
                        $('.loding').hide()
                    }
                })
            },
            //勾选一个
            onesel(index){
                if (this.batch.indexOf(index) == -1) {
                    this.batch.push(index)
                } else {
                    this.batch.splice(this.batch.indexOf(index), 1)
                }
                var isall = true
                $('td input').each(function () {
                    if (!$(this).prop('checked')) {
                        isall = false
                    }
                })
                $('th input').prop('checked', isall)
            },
            //全选
            allsel(event){
                if ($(event.target).prop('checked')) {
                    $(event.target).parents('table').find('input').prop('checked', true)
                    this.batch = this.allkeys
                } else {
                    $(event.target).parents('table').find('input').prop('checked', false)
                    this.batch = []
                }
            },
            //排序
            sortfun(type, $event){
                this.order = $(event.target).attr('data-order')
                //产品的排序
                if (type == 1) {
                    this.pauname = 'prochar_id'
                    this.listone.sort(this.sortoneData);
                }
                //该产品在该仓库的库存
                if (type == 2) {
                    this.pauname = 'storeqty'
                    this.listone.sort(this.sortoneData);
                }
                //调货数量排序
                if (type == 3) {
                    this.pauname = 'qty'
                    this.listone.sort(this.sortoneData);
                }
                //申请时间排序
                if (type == 4) {
                    this.pauname = 'create_at'
                    this.listone.sort(this.sortoneData);
                }
            },
            sortoneData(a, b) {
                if (this.order == 1) {
                    $(event.target).attr('data-order', 2)
                    return b[this.pauname] - a[this.pauname]
                } else {
                    $(event.target).attr('data-order', 1)
                    return a[this.pauname] - b[this.pauname]
                }
            },
            //保存
            savebtn(){
                this.isdisadble=true;
				$.ajax({
					url: "/admin/warehouses/savetransfer",
					type: 'post',
					data: {
						source_id: this.source_id,//源(发货)仓库ID
						leader:this.leader,//取货
						team:this.team,//组员
						warehouse_id:this.warehouse_id,//收货仓id
						tiaolist:this.tiaolist,//调货的产品数据
					},
					dataType: "json",
					success: (result) => {
						if (result.status != 1) {
							change_mes_type('.modal-body .alert',result.status)
							$('.modal-body .alert').show()
							$('.modal-body .alert p').html('*'+result.msg+'<br>')
						} else {
							change_mes_type('#headeralert',result.status)
							$('#headeralert').show()
							$('#headeralert p').html('*'+result.msg+'<br>')
							$('#order_editModal').modal('toggle')
							this.btnwarehouse(this.warehouse_id)
						}
                        this.isdisadble=false;
                    }
				})
            },
            //点击生成调货单
            diaohuo(){
                if(this.batch.length==0){
                    change_mes_type('#headeralert', 2)
                    $('#headeralert').show()
                    $('#headeralert p').html('*请勾选产品<br>')
                }else {
                    var tiaolist=[];//调货的产品
                    var tiaowarsedata=[];//调货的仓库
                    this.source_id='';//发货仓
                    this.leader='';//取货人
					this.team=[]//组员
                    this.batch.forEach(el=>{
                        tiaolist.push(this.listone[el])
                    })
                    this.tiaolist=tiaolist;
                    this.warehousedata.forEach((el,value)=>{
                        if(el.id!=this.warehouse_id){
                            tiaowarsedata.push(this.warehousedata[value])
                        }
                    })
                    this.tiaowarsedata=tiaowarsedata;
                    $('#order_editModal').modal('show')
                }
            },
            //删除调货明细表
            deltransfer(id,name,code){
                var requesturl=''
                if(code==1){
                    //调货指令的删除
                    requesturl='deltransfer';
                }else {
                    //调货单的删除
                    requesturl='deltransferorder'
                }
                $.ajax({
                    url: "/admin/warehouses/"+requesturl,
                    type: 'post',
                    data: {
                        id,
                        code,
                        name
                    },
                    dataType: "json",
                    success: (res) => {
                        change_mes_type('#headeralert',res.status)
                        $('#headeralert').show()
                        $('#headeralert p').html('*' + res.msg + '<br>');
                        if(code==1 && !(this.listone.length - 1)){
                            if(this.page>1){
                                this.page--
                            }
						}else if(code==2 && !(this.listtwo.length - 1)) {
                            if(this.page>1){
                                this.page--
                            }
						}
                        this.btnwarehouse(this.warehouse_id)
                    }
                })
            },
            //调货指令，调货单
            changestatus(code){
                this.status=code;
                this.btnwarehouse(this.warehouse_id);
            }
        },
        mounted(){
            this.getAllList();
            $('#order_editModal').on('show.bs.modal', () => {
                $('.modal-body .alert').hide()
                $('.modal-body .alert p').html()
            })
        }
    })
    $("#order_viewModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(document).unbind('keydown')
    });
</script>
